
@color: #4D926F;

.les1{
  color: @color;
}


.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

.les2{
  .rounded-corners;
}
.les3 {
  .rounded-corners(10px);
}

.les4{
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}


@the-border: 1px;
@base-color: #111;
@red:        #842210;


.les5 { 
  color: @base-color + #003300;
  border-left: @the-border;
  border-right: @the-border * 2;
  border-color: desaturate(@red, 10%);
}



.funcc2 (@a) when (isnumber(@a)) and (@a > 0) {  
  background-color: green;
  }

.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}
.funcc3 (@a) when (@a = true) { 
  background-color: red;}

.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }
.class3 {
  .funcc2(40); // Will not match any of the above definitions.
}



.class4{
  color: black;

  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
    &:hover { text-decoration: none }
  }
}


.bordered {
  &.float {
    float: left; 
  }
  .top {
    margin: 5px; 
  }
}

#bundle {
  .button () {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover { background-color: white }
  }
  .tab {}
  .citation { }
}

.class6 a {
  color: orange;
  #bundle > .button;
}